<template>
  <a-tree 
    showIcon 
    class="draggable-tree" 
    :treeData="tree"
    @select="onSelect">
    <template slot="custom">
      <i class="icon aufontAll h-icon-all-folder-o"></i>
    </template>
  </a-tree>
  <!--  :replaceFields="replaceFields" -->
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({
  name: "MultiTree",
  components: {},
})
export default class MultiTree extends Vue {
  @Prop({ default: () => [] })
 
  treeData!: any[];
  onSelect(data, info) {
    this.$emit("treeSelect", { id: data[0], pos: info.node.pos });
  }
  get tree() {
    // 需要写icon,识别是folder 还是菜单
    let copyTreeData = JSON.parse(JSON.stringify(this.treeData));
    copyTreeData.splice(0,1);// 把根分组删除，不展示
    return copyTreeData.map((item: any) => {
      if (item.children && item.children.length) {
        return this.convert(item, false);
      } else {
        return {
          value: item.id,
          scopedSlots: { icon: "custom" },
          key: item.id,
          title: item.name,
          children: null,
        };
      }
    });
  }
  convert(x: any, isLeaf: boolean) {
    let children = null;
    if (x.children) {
      children = x.children.map((c: any) => this.convert(c, !c.children));
    }
    return {
      scopedSlots: { icon: "custom" },
      value: x.id,
      key: x.id,
      title: x.name,
      children,
    };
  
  }
  // replaceFields = {
  //   title: "name",
  //   key: "id",
  //   value: "id",
  // };
}
</script>
<style lang="less" scoped>
  .draggable-tree{
    margin-left: 8px;
    /deep/ .ant-tree-switcher{
      //display: none;
    }
  }
 
</style>
